import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Layout, Modal, Button, Table, InputNumber, Form, Input, Row, Col,	Dropdown, Menu, message, Select } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import './style.scss';

import ExchangeDetail from './components/exchangeDetail';

const { Header, Footer, Content } = Layout
const { Option } = Select;

class Exchange extends Component {
	state = {
		isFinish: true,
    isCheck: false,
    detailModal: false,
    page: 10,
  }
  
  changePage = (value) => {
    this.setState({page:value});
  }
  
  searchFuzzy=()=>{
    this.searchForm.current.validateFields().then(values=>{
      if(values.name){
        console.log(values);
      }else{
        message.info('请输入资源名称进行搜索！');
      }
    })
  }

  resetForm=()=>{
    this.searchForm.current.resetFields();
  }
  
	//查看任务详情modal是否可见
	changeDetailState = () => {
		this.setState({ detailModal: !this.state.detailModal })
	}
  
  searchForm=React.createRef();
	render() {
		const column = [
			{
				//align: 'center',
				title: '序号',
				// dataIndex: 'number',
        // key: 'number',
        render: (text, record, index) => {
					return <span>{index+1}</span>
				},
			},
			{
				title: '资源代码',
				dataIndex: 'code',
        key: 'code',
        render: (text, record) => {
					return <span className="action">{text}</span>
				},
			},
			{
				title: '资源名称',
				dataIndex: 'name',
				key: 'name',
			},
			{
				title: '资源格式',
				dataIndex: 'share',
				key: 'share',
			},
			{
				title: '资源提供方',
				dataIndex: 'provider',
				key: 'provider',
			},
			{
				title: '需求方',
				dataIndex: 'type',
				key: 'type',
			},
			{
				title: '任务状态',
				dataIndex: 'status',
				key: 'status',
			},
			{
				title: '任务截止日期',
				dataIndex: 'result',
				key: 'result',
			},
			{
				title: '操作',
				key: 'operate',
				render: (text, record) => {
					return (
						<div>
              <span className="action" onClick={() => { }}>{record.status==='已启用'?"停用":"启用"}</span>
							<span className="action" onClick={() => { this.changeDetailState() }}>查看</span>
              <span className="action" onClick={() => { }}>立即执行</span>
						</div>
					)
				},
			},
		]
		const data = [
			{
				number: '1',
				code: '03388/001',
				name: '街道信息',
				provider: '市公安局',
				share: '无条件共享',
				method: '共享平台方式',
				type: '数据库',
				status: '正常',
				result: '已通过',
			},
			{
				number: '2',
				code: '03388/001',
				name: '街道信息',
				provider: '市公安局',
				share: '无条件共享',
				method: '共享平台方式',
				type: '电子文件',
				status: '正常',
				result: '已通过',
			},
			{
				number: '3',
				code: '03388/001',
				name: '街道信息',
				provider: '市公安局',
				share: '无条件共享',
				method: '共享平台方式',
				type: '接口',
				status: '正常',
				result: '已通过',
			},
		]
    const { isFinish, isCheck, detailModal, dbModal, apiModal, page } = this.state
    
		return (
			<Content className="outer">
				<Layout className="container">
					<Header
						className="header"
						style={{ backgroundColor: 'transparent', padding: '0' }}
					>
						<span className="title">交换管理</span>
					</Header>
					<Content className="content">
            <div className='form-inline'>
              <Form layout='inline' ref={this.searchForm}>
                <Form.Item label='任务状态' colon={false} name='status' initialValue="不限">
                  <Select style={{width:120}}>
                    <Option value="不限" key="不限">不限</Option>
                    <Option value="已启用" key="已启用">已启用</Option>
                    <Option value="已禁用" key="已禁用">已禁用</Option>
                  </Select>
                </Form.Item>
                <Form.Item label='资源名称' colon={false} name='name'>
                  <Input />
                </Form.Item>
                <Form.Item>
                  <Button type='primary' onClick={this.searchFuzzy} >查询</Button>
                </Form.Item>
                <Form.Item>
                  <Button type='primary' onClick={this.resetForm}>重置</Button>
                </Form.Item>
              </Form>
            </div>
            <div className='table-box'>
              <Table columns={column}
              dataSource={data}
              pagination={{pageSize:page,showSizeChanger:false}}/>
              <div className={data.length>0?'footer':'withoutPagination'} >
                显示<InputNumber min={1} defaultValue={page} onChange={this.changePage}/>项结果，共{data.length}项
              </div>
            </div>
						<Modal
							title="交换任务详情"
							visible={detailModal}
							onCancel={() => this.changeDetailState()}
              width={800}
							//bodyStyle={{ backgroundColor: '#f0f2f5' }}
							onOk={() => this.changeDetailState()}
						>
							<ExchangeDetail/>
						</Modal>
					</Content>
				</Layout>
			</Content>
		)
	}
}
const mapStateToProps = (state) => ({

})

const mapDispatchToProps = (dispatch) => ({

})

export default connect(mapStateToProps, mapDispatchToProps)(Exchange)
